<template>
	<view class="content-class">
		<u-row justify="space-between" class="record-time">
			<view>{{time}}</view>
			<u-row>
				<u-icon name="reload" color="#fff" size="18"></u-icon>
				<u-icon name="calendar" color="#fff" size="20" style="margin-left: 10px;"></u-icon>
			</u-row>
		</u-row>
		<view class="jkzs-border" v-for="(i, iIndex) in cardList" :key="iIndex" @click="skipPage(i)">
			<view class="jkzs">
				<view class="health-card">
					<u-row class="header">
						<u-row>
							<u-image style="margin-right:8px" width="16px" height="16px" :src="i.icon"></u-image>
							{{ i.name }}
						</u-row>
						<u-row>
							{{ i.time }}
							<u-image style="margin-left:10px" width="20px" height="20px" src="../../static/images/measuring/arrow.png"></u-image>
						</u-row>
					</u-row>
				</view>
				<u-row justify="space-between" :style="{height:iIndex != 7 ? '70px':'45px'}">
					<view class="left-info">
						<view v-if="i.unit1" class="number">
							{{ i.subTitle ? i.subTitle.split('h')[0] : '' }}<span>{{ i.unit }}</span>{{
						i.subTitle ?
							i.subTitle.split('h')[1].replace('min', '') : '' }}<span>{{ i.unit1 }}</span>
						</view>
						<view v-else class="number"><span v-if="i.unit0">{{ i.unit0 }}</span>{{ i.subTitle }}<span>{{ i.unit }}</span></view>
						<span v-if="i.info">
							{{i.info}}
						</span>
					</view>
					<view class="right-btn">
						<u-image v-if="iIndex == 2 ||iIndex == 1 ||iIndex == 8 ||iIndex == 5 " width="94px" height="32px" :src="iIndex == 2 ||iIndex == 1 ||iIndex == 8  ?cMeasure: xtfxMeasure"></u-image>
						<template v-else-if="iIndex == 7">
							<span style="color: rgba(255,255,255,0.5);font-size: 12px;">预计持续：7天</span>
						</template>
						<view v-else style="width: 60%;height:100%;">
							<charts :option="getOption(iIndex)" :id="`HealthRecords${iIndex}`" :height="69"></charts>
						</view>

					</view>
				</u-row>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				option: {},
				loading: true,
				xtfxMeasure: require("../../static/images/homePage/xtfx-btn.jpg"),
				cMeasure: require("../../static/images/homePage/c-btn.png"),
				time: '2015-02-25',
				cardList: [{
						name: '睡眠质量',
						time: '12:00',
						title: '入睡时间',
						icon: require("../../static/images/homePage/smzl.png"),
						subTitle: '06h50',
						unit: 'h',
						unit1: 'min',
						info: '睡眠质量：良好'
					}, {
						name: '心率',
						time: '12:00',
						title: '入睡时间',
						icon: require("../../static/images/homePage/xl.png"),
						subTitle: '93',
						unit: '次/min',
						info: '心率正常范围：79-80 bpm'
					}, {
						"name": "血氧浓度",
						"time": "12:00",
						"title": "浓度数值",
						"icon": require('../../static/images/homePage/xy.png'),
						subTitle: '93',
						unit: '次/min',
						"info": "浓度数值：正常"
					},
					{
						"name": "心率变异性",
						"time": "12:00",
						"title": "变异性数值",
						icon: require("../../static/images/homePage/xlbyx.png"),
						"subTitle": "62",
						unit: 'ms',
						"info": "变异性数值：正常"
					},
					{
						"name": "压力",
						"time": "12:00",
						"title": "身体状态",
						icon: require("../../static/images/homePage/yl.png"),
						"subTitle": "62",
						"info": "身体状态：紧张"
					},
					{
						"name": "血糖",
						"time": "12:00",
						"title": "血糖数值",
						icon: require("../../static/images/homePage/xt.png"),
						"subTitle": "6.1",
						unit: 'mmol/L',
						"info": "血糖数值：正常"
					},
					{
						"name": "体温变化",
						"time": "12:00",
						"title": "体温数值",
						icon: require("../../static/images/homePage/tw.png"),
						"subTitle": "-0.02",
						unit: '℃',
						"info": "体温数值：偏低"
					},

					{
						"name": "女性健康",
						"time": "12:00",
						"title": "生理周期",
						icon: require("../../static/images/homePage/jqsz.png"),
						"subTitle": "12",
						unit0: '还有',
						unit: '天',
						page: 'FemaleHealth'
					},
					{
						"name": "最大摄氧量",
						"time": "12:00",
						"title": "身体状态",
						icon: require("../../static/images/homePage/zdsyl.png"),
						"subTitle": "10.3 ",
						unit: 'ml/kg/min',
						"info": "身体状态：正常"
					},
				],
			};
		},
		methods: {
			skipPage(i) {
				if (!i.page) {
					return
				}
				uni.navigateTo({
					url: `/pages/${i.page}/${i.page}`
				})
			},
			getOption(iIndex) {
				let option = {}
				switch (iIndex) {
					case 0:
						option = {
							grid: {
								containLabel: true,
								left: 0,
								right: 0,
								top: 0,
								bottom: 0,
							},
							tooltip: {
								show: false,
							},
							legend: {
								show: false,
							},
							xAxis: {
								axisLine: {
									show: false,
								},
								axisTick: {
									show: false,
								},
								splitLine: {
									show: false,
								},
								axisLabel: {
									show: false,
								},
							},
							yAxis: {
								data: ["sss"],
								axisLabel: {
									show: false,
								},
								axisLine: {
									show: false,
								},
								axisTick: {
									show: false,
								},
								splitLine: {
									show: false,
								},
							},
							color: ["#02A166", "#FFD8BB ", "#EE9060", "#54D7A5"],
							series: [],
						}
						let echartData = [{
								name: "深睡",
								data: [20]
							},
							{
								name: "浅睡",
								data: [3]
							},
							{
								name: "快速眼动",
								data: [19]
							},
							{
								name: "深睡",
								data: [10]
							},
							{
								name: "浅睡",
								data: [11]
							},
							{
								name: "清醒",
								data: [9]
							},
						];
						echartData.forEach((item, index) => {
							option.series.push({
								type: "bar",
								name: item.name,
								stack: "1",
								label: {
									normal: {
										show: false,
										position: [5, 5],
										formatter: `{value|${item.data}}\n\n{name|${item.name}}`,
										align: "left",
										textStyle: {
											color: "#fff",
											rich: {
												name: {
													fontSize: "12",
													fontWeight: 500,
													color: "gray",
												},
												value: {
													fontSize: "18",
													fontWeight: 500,
													color: "#fff",
												},
											},
										},
									},
								},
								barWidth: 10,
								data: item.data,
								itemStyle: {
									normal: {
										barBorderRadius: [0],
									},
								},
							});
							if (index === 0) {
								option.series[index].itemStyle.normal.barBorderRadius = [6, 0, 0, 6];
							} else if (index === echartData.length - 1) {
								option.series[index].itemStyle.normal.barBorderRadius = [0, 6, 6, 0];
							} else {
								return;
							}
						});
						this.loading = false
						break;
					case 3:
					case 4:
						option = {
							grid: {
								top: "middle",
								left: "20px",
								height: "70%",
								bottom: "0px",
								containLabel: true,
							},
							xAxis: {
								type: 'category',
								data: ['00', '01', '02', '03', '04', '05', '06'],
								axisLine: {
									show: false,
								},
								splitLine: {
									show: false,
								},
								axisTick: {
									show: false,
								},
								axisLabel: {
									show: false,
								},
								boundaryGap: true,
							},
							yAxis: {
								type: 'value',
								// min: 0,
								// max: 100,
								splitLine: {
									show: false,
								},
								axisLine: {
									show: false,
								},
								axisTick: {
									show: false,
								},
								axisLabel: {
									show: false,
								},

							},
							series: [{
								data: [150, 230, 124, 128, 135, 147, 260],
								type: 'bar',
								barMaxWidth: 2,
								zlevel: 10,
								symbolSize: 0,
								itemStyle: {
									normal: {
										color: {
											type: 'linear',
											x: 0,
											y: 0,
											x2: 0,
											y2: 1,
											colorStops: [{
												offset: 0,
												color: 'rgba(2, 161, 102, 1)'
											}, {
												offset: 1,
												color: '#FFD8BB'
											}]
										},
										barBorderRadius: [30, 30, 0, 0],
										label: {
											show: false, //开启显示
											position: 'top', //在上方显示
											textStyle: {
												//数值样式
												color: 'rgba(31, 129, 255, 1)',
												fontSize: 12,
												fontWeight: 400,
											},
										},
									}
								},
							}]
						}
						break;
					case 6:
						option = {
							grid: {
								left: '8%',
								top: '15%',
								bottom: '14%',
								width: '86%',
							},
							//x轴
							xAxis: {
								axisLine: {
									show: false,

								},
								axisLabel: {
									show: false,
								},
								//刻度线
								axisTick: {
									show: false,
								},
								//坐标轴显示值
								data: ['1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时', '14时', ],
							},
							//y轴
							yAxis: {
								// min: 0,
								// max: 100,
								axisLabel: {
									show: false
								},
								//坐标轴线
								axisLine: {
									show: false,
								},
								//刻度线
								axisTick: {
									show: false,
								},
								splitLine: {
									show: false,

								},
							},
							series: [{
								type: "bar",
								barMaxWidth: 2,
								data: [76, 58, -50, 18, 39, -59, 78, -80, 76, 58, -50, 18, 39, -59, 78, -80].map((item) => {
									// 循环 
									return {
										value: item,
										label: {
											show: false, //开启显示
										},
									};
								}),
								itemStyle: { //柱体背景色
									normal: {
										color: {
											type: 'linear',
											x: 0,
											y: 0,
											x2: 0,
											y2: 1,
											colorStops: [{
												offset: 0,
												color: 'rgba(2, 161, 102, 1)'
											}, {
												offset: 1,
												color: '#FFD8BB'
											}]
										}
									},
								},
							}, ],

						}
						break;
					default:
						break;
				}
				return option
			}
		},
	};
</script>

<style scoped lang="scss">
	.content-class {
		padding: 15px;

		.jkzs-border {
			margin-bottom: 0px;
			margin-top: 12px;
		}

		.right-btn {
			flex: 1;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: flex-end;
		}

		.left-info {
			display: flex;
			flex-direction: column;
			height: 100%;
			justify-content: flex-end;

			span {
				font-weight: 500;
				font-size: 12px;
				color: rgba(255, 255, 255, 0.5);
				margin-top: 6px;
			}

			.number {
				font-size: 26px;
				color: #FFFFFF;

				span {
					font-size: 8px;
					margin: 0px 1px;
					color: #FFFFFF;
				}
			}
		}

		.health-card {
			.header {
				justify-content: space-between !important;
				font-size: 14px;
			}

			.header .u-row:last-child {
				font-size: 12px;
				color: #FFD8BB;
			}
		}

		.record-time {
			font-weight: bold;
			font-size: 16px;

			::v-deep .u-icon__icon {
				font-weight: bold !important
			}

		}
	}
</style>